<template>
  <!-- 对话框表单 -->
  <el-dialog
      class="ba-operate-dialog"
      :close-on-click-modal="false"
      :model-value="flowData.operate ? true : false"
      @close="handleFlowClose"
      destroy-on-close
  >
      <template #header>
          <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
              {{ flowData.operate ? t(flowData.operate) : '' }}
          </div>
      </template>
      <el-scrollbar v-loading="flowData.loading" class="ba-table-form-scrollbar">
          <div
              class="ba-operate-form"
              :class="'ba-' + flowData.operate + '-form'"
              :style="'width: calc(100% - ' + 120 / 2 + 'px)'"
          >
              <el-form
                  ref="formRef"
                  :model="flowData.items"
                  label-position="right"
                  :label-width="'120px'"
                  :rules="rules"
                  class="flex"
                  :disabled="flowData.operate=='view' "
              >
              <!-- <FormItem :label="t('uFlowdetail.FLOWID')" type="number" prop="FLOWID" v-model.number="flowData.items!.FLOWID" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('uFlowdetail.FLOWID') }),disabled:true }" /> -->
              <FormItem
                  :label="t('uFlow.FLOWTYPE')"
                  v-model="flowData.items!.FLOWTYPE"
                  prop="COMPANYTYPE"
                  type="remoteSelect"
                  :input-attr="{
                      pk:'codename',
                      field: 'codename',
                      'remote-url': codelib+'approvaltype',
                      placeholder: t('Click Select'),
                      disabled:true
                  }"
              />
              <FormItem :label="t('uFlow.LEVEL0')" type="number" prop="LEVEL0" v-model.number="flowData.items!.LEVEL0" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('uFlow.LEVEL0') }),disabled:true }" />
              <FormItem :label="t('uFlow.LEVEL1')" type="number" prop="LEVEL1" v-model.number="flowData.items!.LEVEL1" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('uFlow.LEVEL1') }),disabled:true }" />
              <FormItem
                  :label="t('uFlow.FLOWDEPT')"
                  v-model="flowData.items!.FLOWDEPT"
                  prop="COMPANYTYPE"
                  type="remoteSelect"
                  :input-attr="{
                      pk:'DEPTID',
                      field: 'DEPTNAME',
                      'remote-url':dEPARTMENT +'index',
                      placeholder: t('Click Select'),
                      disabled:true
                  }"
              />
              <FormItem :label="t('uFlowdetail.FLOWNAME')" type="string" v-model="flowData.items!.FLOWNAME" prop="FLOWNAME" :input-attr="{ placeholder: t('Please input field', { field: t('uFlowdetail.FLOWNAME') }),disabled:true  }" />
              <FormItem :label="t('uFlowdetail.PERIOD')" type="number" prop="PERIOD" v-model.number="flowData.items!.PERIOD" :input-attr="{ step: '1',max:9, placeholder: t('Please input field', { field: t('uFlowdetail.PERIOD') }) }" />
              <FormItem :label="t('uFlowdetail.STAGENAME')" type="string" v-model="flowData.items!.STAGENAME" prop="STAGENAME" :input-attr="{ placeholder: t('Please input field', { field: t('uFlowdetail.STAGENAME') })  }" />
              <FormItem :label="t('uFlowdetail.PROCESSFLAG')" 
              v-model="flowData.items!.PROCESSFLAG" 
              type="select" 
              :data="{content:{0:'0-起',1:'1-止'}}"
              prop="PROCESSFLAG" 
              :input-attr="{ placeholder: t('Please input field', { field: t('uFlowdetail.PROCESSFLAG') })  }" 
              />
              <FormItem :label="t('uFlowdetail.NOTE')" type="textarea" style="width:100%" v-model="flowData.items!.NOTE" prop="NOTE" :input-attr="{ placeholder: t('Please input field', { field: t('uFlowdetail.NOTE') })  }" />
              <FormItem :label="t('uFlowdetail.OPNAME')" type="string" v-model="flowData.items!.OPNAME" prop="OPNAME" :input-attr="{ placeholder: '当前操作人',disabled:true  }" />
              <FormItem :label="t('uFlowdetail.OPDATETIME')" type="datetime" v-model="flowData.items!.OPDATETIME" prop="OPDATETIME" :input-attr="{ placeholder: '当前时间',disabled:true  }" />
              </el-form>
              <div class="btn-wrapper" v-if="flowData.operate !=='view'">
                <el-button v-blur :loading="flowData.submitLoading" @click="handleSave" type="primary">
                  保存明细
                </el-button>
                <el-button v-if="flowData.items.DETAILID" v-blur :loading="flowData.submitLoading" @click="handleAdd" type="primary">
                 新增审核人
                </el-button>
              </div>
              <div class="user-wrapper" v-if="flowData.items.DETAILID">
                <el-table :data="userList" :border="false">
                    <el-table-column width="100">
                    </el-table-column>
                    <el-table-column label="明细ID" prop="DETAILID" />
                    <!-- <el-table-column label="步骤序号" prop="period" /> -->
                    <!-- <el-table-column label="费用类型" prop="ITEMCODE" /> -->
                    <!-- <el-table-column label="步骤名称" prop="stagename" /> -->
                    <!-- <el-table-column label="起止标记" prop="processflag" /> -->
                    <el-table-column label="用户ID" prop="USERID" />
                    <el-table-column label="用户" prop="USERNAME" />
                    <el-table-column label="备注" prop="NOTE" />
                    <el-table-column label="操作" v-if="flowData.operate !=='view'">
                        <template #default="scope">
                            <el-popconfirm title="确认删除选中记录?"  @confirm="handleUserDel(scope.row)">
                                <template #reference>
                                <el-button type="danger" class="table-row-delete table-operate" :icon="Delete" size="small" />
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
              </div>
          </div>
      </el-scrollbar>

      <el-dialog
        v-model="userForm.show"
        title="Tips"
        width="30%"
        :before-close="handleClose"
      >
          <div
            class="ba-operate-form"
            :class="'ba-add-form'"
            :style="'width: calc(100% - ' + 120 / 2 + 'px)'"
          >
              <el-form
                  ref="userRef"
                  :model="userForm.items"
                  label-position="right"
                  :label-width="'120px'"
                  :rules="rules"
                  class="flex"
              >
              <FormItem :label="t('uFlowdetailusers.DETAILID')" type="number" style="width:100%" prop="DETAILID" v-model.number="flowData.items.DETAILID" :input-attr="{ step: '1', placeholder: t('Please input field', { field: t('uFlowdetailusers.DETAILID') }),disabled:true  }" />
              <FormItem :label="t('uFlowdetailusers.USERID')" type="string" style="width:100%" v-model="userForm.items!.USERID" prop="USERID" :input-attr="{ placeholder: '自动保存',disabled:true }" />
              <FormItem
                  :label="'用户名'"
                  style="width:100%"
                  v-model="userForm.items!.USERNAME"
                  prop="SALER"
                  type="remoteSelect"
                  :input-attr="{
                      pk: 'nickname',
                      field: 'nickname',
                      'remote-url':authAdmin+'index',
                      placeholder: t('Click Select'),
                      onChange:getCurrentUser
                  }"
              />
              <FormItem :label="t('uFlowdetail.NOTE')" type="textarea" style="width:100%" v-model="userForm.items!.NOTE" prop="NOTE" :input-attr="{ placeholder: t('Please input field', { field: t('uFlowdetail.NOTE') })  }" />
            </el-form>
            </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="userForm.show = false">取消</el-button>
            <el-button type="primary" @click="confirmAdd">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>

  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, inject, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import type baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import { ElForm, ElMessage, FormItemRule } from 'element-plus'
import { buildValidatorData } from '/@/utils/validate'
import { dEPARTMENT ,codelib ,uFlowdetail , uFlowdetailusers ,authAdmin } from '/@/api/controllerUrls'
import createAxios from '/@/utils/axios'
import { method } from 'lodash-es'
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import { getSelectData } from '/@/api/common'
import admin from '/@/lang/pages/en/auth/admin'



const formRef = ref<InstanceType<typeof ElForm>>()
const flowData:any = inject('flowData')

const { t } = useI18n()

const rules: Partial<Record<string, FormItemRule[]>> = reactive({
  PERIOD: [buildValidatorData({name: 'required',title: t('uFlowdetail.PERIOD')})],
  PROCESSFLAG: [buildValidatorData({name: 'required', title: t('uFlowdetail.PROCESSFLAG')})],
  STAGENAME: [buildValidatorData({name: 'required', title: t('uFlowdetail.STAGENAME')})],
  OPDATETIME: [buildValidatorData({name: 'date', message: t('Please enter the correct field', { field: t('uFlowdetail.OPDATETIME') })})],
})

watchEffect(()=>{
  if((flowData.operate =='edit'||flowData.operate =='view')&&flowData.items.DETAILID){
    getUserList()
  }
  if(flowData.operate == 'add'){
    userList.value = []
  }
})

const baTable = inject('baTable') as baTableClass

const handleSave = ()=>{
  createAxios({
    url: uFlowdetail + flowData.operate,
    method:'POST',
    data: flowData.items
  }).then((res:any)=>{
    ElMessage.success('保存成功')
    flowData.DETAILID = res.data
  })
}
const handleFlowClose = ()=>{
  flowData.operate=''
  baTable.getIndex()
}

const userList:any = ref([])
const getUserList = ()=>{
  createAxios({
    url: uFlowdetailusers + `index?search[]=%7B%22field%22:%22DETAILID%22,%22val%22:%22${flowData.items.DETAILID}%22,%22operator%22:%22%3D%22%7D&order=ID,desc`
  }).then((res:any)=>{
    userList.value = res.data.list
  })
}

const handleUserDel = (item:any)=>{
    createAxios({
        url:uFlowdetailusers+'del',
        method:'DELETE',
        data:{
            ids:[item.ID]
        }
    }).then((res:any)=>{
        ElMessage({
            message:'删除成功',
            type:'success'
        })
        getUserList()
    })
}


const userForm = reactive({
  show:false,
  items:{
    DETAILID:'',
    NOTE:'',
    USERID:'',
    USERNAME:''
  }
})

const getCurrentUser = (nickname:string)=>{
  let url = authAdmin + 'index'
    createAxios({
      url,
      params:{
        initKey:'nickname',
        initValue:nickname,
        select:true,
      }
    }).then((res:any)=>{
      let item = res.data.list[0] || {}
      userForm.items.USERID = item.id
    })
    // getSelectData(url,nickname,{
    //     initValue:nickname,
    // }).then(res=>{
    // })
}

const handleAdd = ()=>{
  userForm.show = true
  userForm.items.DETAILID = flowData.items.DETAILID
}

const confirmAdd = ()=>{
  createAxios({
    url:uFlowdetailusers+'add',
    method:"POST",
    data:userForm.items
  }).then(()=>{
    ElMessage.success('保存成功')
    userForm.show = false
    getUserList()
  })
}

const handleClose = ()=>{
  userForm.show = false
  userForm.items.USERID = ''
  userForm.items.USERNAME = ''
  userForm.items.NOTE = ''
}


</script>

<style scoped lang="scss"></style>
